<div class="sidebar" ng-controller="SideBarController">
  <nav class="sidebar-nav">
    <ul class="nav">
      
      <li class="divider"></li>

      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'dashboard'}" href="#/dashboard"><i
            class="icon-speedometer"></i> Dashboard
        </a>
      </li>

      <li class="divider"></li>

      <li class="nav-item">
          <a class="nav-link"
            ng-class="{active: $route.current.activePage == 'bots' || $route.current.activePage == 'bot'}"
            href="#/bots"><i class="icon-people"></i> Bots</a>
        </li>
      
        <li class="divider"></li>

      <li class="nav-title">Components</li>
    
      <li class="nav-item">
          <a class="nav-link" ng-class="{active: $route.current.activePage == 'responses'}" href="#/responses"><i
              class="icon-bubble"></i> Responses</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" ng-class="{active: $route.current.activePage == 'stories'}" href="#/stories"><i
              class="icon-directions"></i> Stories</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'training'}" href="#/training"><i
            class="icon-graduation"></i> Training</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'models'}" href="#/models"><i
            class="icon-layers"></i> Models</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'chat'}" href="#/chat"><i
            class="icon-bubbles"></i> Chat</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'settings'}" href="#/settings"><i
            class="icon-settings"></i> Settings</a>
      </li>
      <!-- TODO: Need to fix Insights page then add back 
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'insights'}" href="#/insights"><i
            class="fa fa-chart-bar"></i> Insights</a>
      </li>
      -->
      <li class="divider"></li>

      <li class="nav-title">Rasa</li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'logs'}" href="#/logs"><i
            class="icon-list"></i> Logs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" ng-class="{active: $route.current.activePage == 'config'}" href="#/rasaconfig"><i
            class="icon-wrench"></i> Configuration</a>
      </li>

      <li class="nav-title">&nbsp;</li>
      <li class="nav-item">
        <a class="nav-link" href="#" ng-click="logout()"><i class="icon-logout"></i> Logout</a>
      </li>
    </ul>
  </nav>
</div>